// 这种写法有问题，验证码的handleChange会反复调用
import React, { useState, useRef } from "react";
import { CapsuleTabs, Form, Input, Checkbox } from "antd-mobile";
import s from "./styleProblem.module.less";
import Captcha from "react-captcha-code";
import { SystemQRcodeOutline } from "antd-mobile-icons";
import LoginRegister from "./components/LoginRegister";
import QRLogin from "../QRLogin";
export default function Login() {
  const captchaRef = useRef();
  const [captcha, setCaptcha] = useState("");
  const [QRlogin, setQRlogin] = useState(false);
  // 验证码变化，回调方法
  const handleChange = (newCaptcha) => {
    console.log("captcha", newCaptcha);
    setCaptcha(newCaptcha);
  };
  const checkCaptcha = (_, value) => {
    console.log(value);
    if (value === captcha) {
      return Promise.resolve();
    }
    return Promise.reject(new Error("验证码不匹配!"));
  };
  const switchLogin = () => {
    console.log("first");
    setQRlogin(!QRlogin);
  };
  return (
    <div className={s.auth}>
      <div className={s.head}>
        <div className={s.head} />
      </div>
      <div className={s.form}>
        <CapsuleTabs>
          <CapsuleTabs.Tab title="登录" key="fruits">
            {QRlogin ? (
              <QRLogin switchLogin={switchLogin} />
            ) : (
              <>
                <LoginRegister isLogin={true} />
                <div
                  className={s.QRLogin}
                  title="二维码登录"
                  onClick={switchLogin}
                >
                  <SystemQRcodeOutline fontSize={48} title="二维码登录" />
                </div>
              </>
            )}
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title="注册" key="vegetables">
            <LoginRegister isLogin={false}>
              <Form.Item
                name="verify"
                label="验证码"
                rules={[
                  { required: true, message: "验证码不能为空" },
                  { validator: checkCaptcha },
                ]}
                extra={
                  <Captcha
                    ref={captchaRef}
                    charNum={4}
                    onChange={handleChange}
                  />
                }
              >
                <Input
                  autoComplete="current-password"
                  clearable
                  onChange={console.log}
                  placeholder="请输入验证码"
                  type="text"
                />
              </Form.Item>
              <Form.Item name="label" label="">
                <Checkbox>
                  阅读并同意<a>《掘掘手札条款》</a>
                </Checkbox>
              </Form.Item>
            </LoginRegister>
          </CapsuleTabs.Tab>
        </CapsuleTabs>
      </div>
    </div>
  );
}
